<template>
  <div class="main-box">
      <p style="margin:0 auto;">这是一个堆糖</p>
    <input type="text" class="inp" v-model="content" @keyup.enter="searchSome" />
    <div class="Item-box" v-for="(item) in datas" :key="item.id"
      @click="handleId(item.id)"
    >
      <div class="head-box">
        <img :src="item.userPic" alt class="head" />
        <div class="name">{{item.userName}}</div>
      </div>
      <div class="pics-box">
        <img :src="picitem" alt class="pic" v-for="(picitem,index) in item.urls" :key="index" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datas: [],
      content:""
    };
  },
  mounted() {
    var url = "http://192.168.14.4:8080/home";
    this.axios.get(url).then(res => {
      console.log(res);
      this.datas = res.data;
    });
  },
  methods: {
    handleId(id){
      this.$router.push({path:'/about',query:{
        id:id
      }})
    },
    searchSome(){
        var content=this.content;
        this.$router.push({path:'/search',query:{
            kw:content
        }})
    }
  }
};
</script>
<style scoped>
.main-box{
  width: 600px;
  margin: 0 auto;
  border: 1px solid #eeeeee;
  background: -webkit-linear-gradient(
    top,
    rgb(240, 125, 125) 0%,
    rgb(225, 237, 195) 100%
  );
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 500px;
  align-items: center;
}
.inp {
  width: 300px;
  margin: 12px 0;
  text-indent: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
    0 1px 6px rgba(0, 0, 0, 0.45) inset;
  border: none;
}
.Item-box {
  width: 100%;
  padding: 15px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 1px solid #fff;
}
.head-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
.head {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 50%;
}
.name {
  font-weight: 600;
  font-size: 24px;
  font-family: "黑体";
  color: #8c888b;
  background: -webkit-linear-gradient(
    45deg,
    #70f7fe,
    #fbd7c6,
    #fdefac,
    #bfb5dd,
    #bed5f5
  );

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.pics-box{
  width:400px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.pic{
  width:120px;
  height: 120px;
  margin-bottom: 10px;
}
</style>
